<script setup lang='ts'>
import { onMounted } from 'vue';
import themeColor from './colorExtraction';
const SetColor = (colorArr: number[][]) => {
    // 初始化删除多余子节点
    const extractColor = document.querySelector('#extract-color-id') as HTMLElement;
    while (extractColor.firstChild) {
        extractColor.removeChild(extractColor.firstChild);
    }
    // 创建子节点
    for (let index = 0; index < colorArr.length; index++) {
        const bgc = '(' + colorArr[index][0] + ',' + colorArr[index][1] + ',' + colorArr[index][2] + ')';
        const colorBlock = document.createElement('div') as HTMLElement;
        colorBlock.id = `color-block-id${index}`;
        colorBlock.style.cssText = 'height: 50px;width: 50px;margin-right: 10px;border-radius: 50%;';
        colorBlock.style.backgroundColor = `rgb${bgc}`;
        extractColor.appendChild(colorBlock);
    }
};

onMounted(() => {
    const img = new Image();
    img.src = '/src/assets/vue.svg';
    img.crossOrigin = 'anonymous';
    img.onload = () => {
        themeColor(1, img, 20, SetColor);
    };
})
</script>
<template>
    <div>
        <canvas style="display: none" id="canvas"></canvas>
        <div id="extract-color-id" class="extract-color" style="display: flex;padding: 0 20px; justify-content:end;">
        </div>
    </div>
</template>
<style lang='less' scoped>

</style>